<template>
	<view>
		<view style="height: 45px;display: flex;  flex-direction: row;">
			<view @click="closeDrawer"
				style="display: flex;  flex-direction: row;align-items: center;justify-content: flex-start;">
				<uni-icons type="left" size="20"></uni-icons>
				<text style="font-size: 14px;">返回</text>
			</view>
			<view style="display: flex; flex: 1; flex-direction: row; justify-content: center;  align-items: center;">
				筛选</view>
		</view>
		<view class="tab-bar-line"></view>
		<scroll-view :style="{ height: swiperHeight + 'px' }"  scroll-y="true">
			<slot></slot>
			<uni-forms class="content">
				<uni-forms-item>
					<view style="display: flex; flex-direction: row; ">
						<view style="flex:1;padding: 5px;">
							<button style="border-radius: 40px; font-size: 17px; background-color: #eaeaea;"
								@click="reset">重置</button>
						</view>
						<view style="flex:2; padding: 5px;">
							<button style="border-radius: 40px;font-size: 17px;" type="primary"
								@click="query">查询</button>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</scroll-view>

	</view>

</template>

<script>
	export default {
		name: "filterView",
		emits: ['clikeLeft', 'reset', 'query'],
		data() {
			return {
				//滑动区域的高度(单位px)
				swiperHeight: 0,
				windowWidth: 0,
				StatusBar: 0
			};
		},
		mounted() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.y = res.windowHeight
					this.windowWidth = res.windowWidth;
					var statusBar = res.statusBarHeight //状态栏高度
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.swiperHeight = res.screenHeight - statusBar - 45
					this.StatusBar = statusBar
					console.log('heightShow', this.swiperHeight)
				}
			})
		},
		methods: {
			closeDrawer() {
				//声明注册一个左按钮点击事件
				this.$emit('clikeLeft', {})
			},
			reset() {
				//声明注册一个重置点击事件
				this.$emit('reset', {})
			},
			query() {
				//声明注册一个查询点击事件
				this.$emit('query', {})
			}
		}
	}
</script>

<style>
	.content {
		padding: 15px;
	}

	/* 修改按钮的边框 */
	uni-button:after {
		border: 0px;
	}
</style>
